<template>
  <!-- 首页 -->
  <div class="home" id="home">
    <div class="video">
      <video
        src="../video/3d102e05ca38da107bf2a44a7bf47d33.mp4"
        controls
        loop
        muted
        autoplay
      ></video>
    </div>
    <div class="block"></div>
    <div class="logo">
      <a href="./App.vue"
        ><img src="../assets/image/logo.CThl7NN4.png" alt=""
      /></a>
    </div>
    <!-- 登录按钮  -->
    <div @click="isShow = true" class="loging">
      <img src="../assets/image/btn_user_no_login.C1HWHMYN.png" alt="" />
    </div>
    <div class="age">
      <img src="../assets/image/age_btn.BqUL0_tp.png" alt="" />
    </div>
    <!-- 列表 -->
    <div class="lis">
      <ul>
        <li v-for="item in tabs" :key="item.id">
          <a :href="item.Id" @click="setColor($event)">{{ item.name }}</a>
        </li>
      </ul>
    </div>
    <!-- 下载 -->
    <div class="downloed">
      <div class="btn_left">
        <div class="erweima">
          <img src="../assets/image/头像.png" alt="" />
        </div>
        <div class="pc">
          <a href="JavaScript:;"
            ><img src="../assets/image/pc下载.png" alt=""
          /></a>
        </div>
      </div>
      <div class="btn_right">
        <div class="android">
          <a href="JavaScript:;"
            ><img src="../assets/image/Android.png" alt=""
          /></a>
        </div>
        <div class="app">
          <a href="JavaScript:;">
            <img src="../assets/image/App.png" alt=""
          /></a>
        </div>
        <div class="taptap">
          <a
            href="https://www.taptap.cn/app/245662?utm_medium=rep&utm_source=rep_wo298ns7opa"
            target="_blank"
            ><img src="../assets/image/TapTappng.png" alt=""
          /></a>
        </div>
        <div class="haoyou">
          <a href="JavaScript:;">
            <img src="../assets/image/btn_haoyou_down好游快爆.png" alt=""
          /></a>
        </div>
      </div>
    </div>
    <!-- 分享 -->
    <div class="qq">
      <div v-for="item in qq_And_WeiXin" :key="item.id" class="btn">
        <img :src="item.Src" />
      </div>
    </div>

    <!-- 弹窗 -->
    <div v-show="isShow" class="pop_loging">
      <div class="loging">
        <div class="top">
          <img src="../assets/image/login_title.DEnIiKwu.png" alt="" />
        </div>

        <form action="JavaScript:;">
          <div class="login">
            <h3>手机号码：</h3>
            <input type="text" placeholder="请输入手机号码" name="username" />
            <br />
            <h3>验证码：</h3>
            <input type="text" placeholder="请输入验证码" name="password" />
            <span class="yanzheng"><a href="JavaScript:;">获取验证码</a></span>
            <input type="checkbox" name="checkbox" /><span
              >我已详细阅读并同意 <a href="JavaScript:;">《用户协议》</a> 和
              <a href="JavaScript:;">《隐私政策》</a></span
            >
          </div>

          <div class="btn">
            <a href="JavaScript:;">登录</a>
          </div>

          <div @click="isShow = false" class="x">
            <img src="../assets/image/close_icon.CC0EuTte.png" alt="" />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import wei from "../assets/image/wei.png";
import weibo from "../assets/image/weibo.png";
import weixin from "../assets/image/weixin.png";
import qq from "../assets/image/qq.png";
import douyin from "../assets/image/douyin.png";
import bilibili from "../assets/image/bilibili.png";
import taptap from "../assets/image/taptap.png";
import xiaohongshu from "../assets/image/小红书.png";
import haoyou from "../assets/image/好游快爆.png";
import share from "../assets/image/分享.png";

export default {
  name: "MyHome",
  components: {},
  data() {
    return {
      isShow: false,
      tabs: [
        { id: 1, Id: "#home", name: "首页" },
        { id: 2, Id: "#Appointment", name: "预约活动" },
        { id: 3, Id: "#new", name: "最新资讯" },
        { id: 4, Id: "#LongYin", name: "龙胤档案" },
        { id: 5, Id: "#city", name: "九龙街区" },
        { id: 6, Id: "#Pian", name: "龙潮制片" },
        { id: 7, Id: "#JieShao", name: "特色介绍" },
      ],
      qq_And_WeiXin: [
        { id: 1, Src: wei },
        { id: 2, Src: weibo },
        { id: 3, Src: weixin },
        { id: 4, Src: qq },
        { id: 5, Src: douyin },
        { id: 6, Src: bilibili },
        { id: 7, Src: xiaohongshu },
        { id: 8, Src: taptap },
        { id: 9, Src: haoyou },
        { id: 10, Src: share },
      ],
      pro: null,
    };
  },
  methods: {
    setColor(event) {
      if (this.pro != null) {
        this.pro.style.color = "white";
      }
      this.pro = event.target;
      event.target.style.color = "skyblue";
    },
  },
};
</script>

<style>
</style>
